<!--
 * @Author: Huangdong
 * @Date: 2022-03-28 15:27:35
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @LastEditTime: 2025-09-11 09:07:58
 * @FilePath: \02.bldinsure\src\views\index\index.vue
 * @Description: 
 * 
 * 
-->
<template>
  <div class="home-index">
    <TopBanner />
    <div class="block_10 bg-f5"></div>
    <InsureNewerKnow />
    <TabModule class="mt10" />
    <div class="foot-warn">
      <p>本页面仅用于产品宣传使用，具体内容请以保险合同为准</p>
      <p>本产品由民盛保险代理有限公司销售</p>
    </div>
    <div class="fix_foot_box">
      <div class="actionBox">
        <div class="icon_text_box" @click="feePreCount" v-if="showPreCount">
          <img
            src="https://wxou.mschn.cn/app_h5/insurepics/iconfont/count.png"
            style="width: 20px"
          />
          <span class="btn2_text">保费试算</span>
        </div>
        <div class="ftc4 ft12 mr10" v-else-if="lowerPrice">
          <i class="font2 ft24">{{ lowerPrice }}</i> 元起
        </div>
        <div
          class="btn-click"
          :class="hasSaleAuth == '0' ? 'btn_bg' : 'btn_bg3'"
          @click="toNextPage"
        >
          立即投保
        </div>
      </div>
    </div>

    <InsurePreNotice ref="insureNoticeRef" />
    <RecordWarnTip
      ref="recordRef"
      @sure="
        show = false;
        insuAction();
      "
      @close="show = false"
      v-if="show"
    />
    <InsuFeePreCount
      ref="preCountRef"
      @close="feeCount = false"
      v-if="feeCount"
    ></InsuFeePreCount>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import TopBanner from "./components/TopBanner";
import InsureNewerKnow from "./components/InsureNewerKnow";
import TabModule from "./components/TabModule";
import InsurePreNotice from "./components/InsurePreNotice";
import RecordWarnTip from "./components/RecordWarnTip";
import InsuFeePreCount from "./feecount/InsuFeePreCount";
export default {
  name: "HomeIndex",
  components: {
    TopBanner,
    InsureNewerKnow,
    TabModule,
    RecordWarnTip,
    InsurePreNotice,
    InsuFeePreCount,
  },
  data() {
    return {
      show: false,
      feeCount: false,
    };
  },
  computed: {
    ...mapGetters({
      hasSaleAuth: "agent/hasSaleAuth",
      lowerPrice: "varietyInfo/lowestPrice",
      zeRenList: "page/zeRenList",
      abutmentType: "varietyInfo/abutmentType",
      isOnline: "varietyInfo/isOnline",
      gzPopRead: "page/gzPopRead",
    }),
    showPreCount() {
      let flag = false;
      if (["3"].includes(this.isNetInsure)) {
        flag = true;
      }
      return flag;
    },
  },
  mounted() {
    this.show = false;
    if (this.gzPopRead != "1") {
      this.$refs.insureNoticeRef.initModule();
    }
    // wechatInitShareConfig(window.location.href);
  },
  methods: {
    toNextPage() {
      if (this.showPreCount) {
        this.show = true;
        this.$nextTick(() => {
          this.$refs.recordRef.initModule();
        });
      } else {
        this.insuAction();
      }
    },
    insuAction() {
      if (this.hasSaleAuth == "0") {
        if (this.showPreCount) {
          this.feePreCount();
        } else {
          this.$router.push("/count");
        }
      } else {
        this.$msAlert("此产品与保险代理人可销售区域不相符，请联系保险代理人");
      }
    },
    feePreCount() {
      this.feeCount = true;
      this.$store.dispatch("insert/initNewBbr");
      this.$nextTick(() => {
        this.$refs.preCountRef.initModule();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.foot-warn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 14px 0;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  line-height: 2;
  background-color: #f5f5f9;
  padding-bottom: 90px;
}

.actionBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 0 14px;

  .premBox {
    text-align: right;
  }

  .btn-click {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 40px;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    border-radius: 34px;
    padding: 0 15px;
  }
}
.icon_text_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-right: 15px;
  .btn2_text {
    font-size: 12px;
    color: #1b1b1b;
    line-height: 18px;
    margin-top: 3px;
  }
}
</style>
